<template>
  <view class="stop-delivery-container">
    <view class="stop-delivery-label">
      <view class="left">
        1.选择停奶日期
      </view>
      <text class="right">已选{{selectedDays.length}}天</text>
    </view>
    <scroll-view 
      scroll-y
      class="delivery-plan-container"
    >
      <view class="delivery-plan">
        <view 
          v-for="(item, index) in deliveryPlanList" 
          :key="item.deliveryDate" 
          class="delivery-day-item"
          :class="{active: selectedDays.indexOf(item.deliveryDate) > -1, disabled: item.isStopped}"
          @click="selectDeliveryDate(item,index)"
        >
          {{item.deliveryDate | formatDate}}
        </view>
      </view>
    </scroll-view>
    <view class="stop-delivery-label">
      <view class="left">
        2.选择停奶方式
      </view>
      <view class="right">
        <view 
          v-for="(item, index) in stopTypeList" 
          :key="index" 
          class="radio-item"
          @click="selectStopType(item)"
        >
          <view class="radio-item-label">
            <view 
              v-if="selectedStopType === item.stopType" 
              :class="{checked: selectedStopType === item.stopType}"
            />
          </view>
          <text>{{item.text}}</text>
        </view>
      </view>
    </view>
    <view v-if="selectedStopType === 2" class="no-border-top stop-delivery-label">
        <view class="left">
          3.集中投递日期
        </view>
        <picker
          mode="date"
          :value="centralizedDate"
          :start="startDate"
          :end="endDate"
          @change="bindDateChange"
        >
          <view class="right">
            <text class="centralizedDate">{{centralizedDate}}</text>
            <text class="right yticon icon-you"></text>
          </view>
        </picker>
        
      </view>

    <view class="confirm-btn-container">
      <button
        class="confirm-btn"
        type="primary"
        :class="{disabled: disabled}"
        :disabled="disabled"
        @click="stopOrder"
      >
        确认操作
      </button>
    </view>
  </view>
</template>

<script>
import { mapState } from 'vuex'
import { parseTime } from '@/utils/index.js'
export default {
  data() {
    return {
      // 停奶的天数集合
      selectedDays: [],
      // 订单编号
      orderNo: '',
      // loading加载 防重复操作
      loading: false,
      stopTypeList: [
        {
          stopType: 1,
          text: '延后投递'
        },
        {
          stopType: 2,
          text: '集中投递'
        },
      
      ],
      // 停奶的方式 1：延后 2：集中
      selectedStopType: 1,
      // 集中投递的日期
      centralizedDate: '',
      // 某个订奶的计划
      deliveryPlanList: [
        {
          // deliveryDate: '2020-06-24',
          // deliveryStatus: 1,
          // isStopped: 0
        },
      ]

    }
  },
  computed: {
    ...mapState(['userInfo']),
    // 操作按钮禁用状态
    disabled() {
      if(this.selectedStopType === 1) {
        return !(this.selectedDays.length > 0)
      } else {
        return !(this.selectedDays.length > 0 && this.centralizedDate)
      }
    },
    startDate() {
      let startTime = +new Date()
      if(this.deliveryPlanList.length > 0) {
        startTime = this.deliveryPlanList[0].deliveryDate
      }
      // console.log('startDate:', parseTime(+new Date(startTime) + 3600000 * 24 * 3, '{y}-{m}-{d}'))
      return parseTime(+new Date(startTime) + 3600000 * 24 * 3, '{y}-{m}-{d}')
    },
    endDate() {
      let endTime = +new Date()
      if(this.deliveryPlanList.length > 0) {
        endTime = this.deliveryPlanList[this.deliveryPlanList.length - 1].deliveryDate
      }
      // console.log('endDate:', parseTime(+new Date(endTime) - 3600000 * 24 * 7, '{y}-{m}-{d}'))
      return parseTime(+new Date(endTime) + 3600000 * 24 * 7, '{y}-{m}-{d}')
    }
  },
  filters: {
    formatDate(date) {
      return parseTime(date, '{m}-{d}')
    }
  },
  async onLoad(options) {
    this.orderNo = Number(options.orderNo)
    this.deliveryGoodId = Number(options.goodId)
    // getStopOrderPlan
    const orderPlan = await this.$api.json('getStopOrderPlan', { orderNo: this.orderNo, openId: this.userInfo.openId })
    this.deliveryPlanList = orderPlan.deliveryPlanList
  },
  methods: {
    // 选中送奶日期
    selectDeliveryDate(item, i) {
      if(item.isStopped) {
        return
      }
      const index = this.selectedDays.findIndex(v => v === item.deliveryDate)
      if(index > -1) {
        this.selectedDays.splice(index, 1)
      } else {
        this.selectedDays.push(item.deliveryDate)
      }
    },
    // 选中停奶方式
    selectStopType(item) {
      this.selectedStopType = item.stopType
    },
    // 集中投递选择
    bindDateChange(e) {
      if(+new Date(this.startDate) > +new Date(this.endDate)) {
        uni.showModal({
          title: '提示',
          content: '投递时间必须在3天后，结束时间7天内',
          showCancel: false
        })
        return
      }
      this.centralizedDate = e.target.value
    },
    // 停奶
    stopOrder() {
      if(this.loading) {
        return
      }
      let params = {}
      if(this.selectedStopType === 1) {
        params = {
          openId: this.userInfo.openId,
          orderNo: this.orderNo,
          stopType: this.selectedStopType,
          planDeliveryList: this.deliveryPlanList,
        }
      } else {
        params = {
          openId: this.userInfo.openId,
          orderNo: this.orderNo,
          stopType: this.selectedStopType,
          planDeliveryList: this.deliveryPlanList,
          centralizedDate: this.centralizedDate
        }
      }
      this.loading = true
      uni.showLoading({
        title: ''
      })
      this.$api.json('stopOrder', params).then(res => {
        uni.hideLoading()
        this.$api.msg(res.data)
        setTimeout(() => {
          this.loading = false
          uni.navigateBack()
        }, 300)
      }).catch(err => {
        uni.hideLoading()
        this.loading = false
        console.log(err)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
  .stop-delivery-container {
    background-color: #ffffff;
  }
  .stop-delivery-label {
    width: 750rpx;
    height: 120rpx;
    padding: 20rpx;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
    .left {
      font-size: $font-base;
      color: $font-color-dark;
    }
    .right {
      display: flex;
      align-items: center;
      color: $font-color-base;
      font-size: $font-base;
    }
  }
  .radio-item {
    display: flex;
    align-items: center;
    font-size: $font-base;
    color: $font-color-base;
    margin-left: 40rpx;
    .radio-item-label {
      width: 36rpx;
      height: 36rpx;
      border: 1rpx solid #ccc;
      border-radius: 50%;
      margin-right: 10rpx;
      position: relative;
      display: flex;
      justify-content: center;
      align-items: center;
      .checked {
        width: 24rpx;
        height: 24rpx;
        border-radius: 50%;
        position: relative;
        background-color: $base-color;
      }
    }
  }
  .active {
    background-color: $base-color;
    color: #ffffff !important;
    border-color: $base-color !important;
  }
  .delivery-plan-container {
    width: 750rpx;
    height: 400rpx;
  }
  .delivery-plan {
    width: 750rpx;
    padding: 40rpx 25rpx;
    display: flex;
    flex-wrap: wrap;
    // justify-content: space-between;
    align-items: center;
    .delivery-day-item {
      width: 130rpx;
      height: 60rpx;
      line-height: 60rpx;
      border-radius: 8rpx;
      border: 1px solid #ccc;
      text-align: center;
      font-size: $font-base;
      color: $font-color-base;
      margin-right: 10rpx;
      margin-bottom: 10rpx;
    }
  }
  .no-border-top {
    border-top: 0;
  }
  .centralizedDate {
    width: 400rpx;
    height: 60rpx;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-right: 40rpx;
  }
  .confirm-btn-container {
    width: 750rpx;
    height: 200rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    .confirm-btn {
      width: 650rpx;
      height: 80rpx;
      background-color: $base-color;
    }
  }
  .disabled {
    background-color: $font-color-disabled !important;
    
  }
</style>
